<!DOCTYPE html>
<html>
<head>
    <title>图标滚动</title>
    <meta charset="utf-8">
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: #EBEBED;
    }
    .head_href
    {
    width: 980px;
    height: 36px;
    overflow: hidden;
    margin: 0 auto;
    }
    a{
        text-decoration: none;
        color: #777;
        font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
    }
    .href_Top_left{
        float: left;
        line-height: 36px;
    }
    .href_Top_right{
        float: right;
        line-height: 36px;
    }
    .box{
        background: #FFFFFF;
        width: 980px;
        margin: 5px auto 0;
        box-shadow: 0 1px 5px rgba(0,0,0,0.3);
        border: 1px solid #E5E5E5;

    }
    .box_head{
        height: 158px;
        width: 820px;
        position: relative;
        overflow: hidden;
        margin: 0 70px;

    }
    .img_head{
        width: 1680px;
    }
    .img_head li{
        list-style: none;
        float: left;
        width: 140px;
        text-align: center;
    }
    .footer{
        background: #FFFFFF;
        height: 30px;
        border: 1px solid #ebebeb;
        border-radius: 3px 3px 0 0;
        text-align: center;
        position: relative;
    }
    .cursor{
        position: absolute;

        left: 420px;
        display: block;
        width: 15px;
        height: 8px;
        background: url("img1/13.gif");
        background-repeat: no-repeat;
    }
    .footer a{
        cursor: pointer;
        line-height: 30px;
        margin: 0 15px;
        text-shadow: 0 1px 0 #ffffff;
    }
    .show{
        color: black;
    }


    </style>
</head>
<body>
<div id="div1" class="box">
    <div class="box_head">
    <ul class="img_head" >
        <li>
            <a href="rollwan.html">
                <img src="img1/1.jpg">
                iPod shuffle
            </a>
        </li>
        <li>
            <a href="rollwan.html">
                <img src="img1/2.jpg">
                iPod nano
            </a>
        </li>
        <li>
            <a href="rollwan.html">
                <img src="img1/3.jpg">
                iPod classic
            </a>
        </li>
        <li>
            <a href="rollwan.html">
                <img src="img1/4.jpg">
                iPod touch
            </a>
        </li>
        <li>
            <a href="rollwan.html">
                <img src="img1/5.jpg">
                Apple tv
            </a>
        </li>
        <li>
            <a href="rollwan.html">
                <img src="img1/6.jpg">
                Accessories
            </a>
        </li>
        <li>
            <a href="rollwan.html">
                <img src="img1/7.jpg">
                Download iTunes 10
            </a>
        </li>
        <li>
            <a href="rollwan.html">
                <img src="img1/8.jpg">
                iTunes git
            </a>
        </li>
        <li>
            <a href="rollwan.html">
                <img src="img1/9.jpg">
                Nike+iPod
            </a
        </li>
        <li>
            <a href="rollwan.html">
                <img src="img1/10.jpg">
                 Red
            </a>
        </li>
        <li>
            <a href="rollwan.html">
                <img src="img1/11.jpg">
                MobileMe
            </a>
        </li>
        <li>
            <a href="rollwan.html">
                <img src="img1/12.jpg">
                 In-Ear
            </a>
        </li>
    </ul>
    </div>
    <div class="footer">
        <span class="cursor"></span>
        <a class="show">Products</a>
        <a class="show1">iTunes and More</a>
    </div>
</div>
</body>
    <script src="jquery-2.2.3.js" type="text/javascript"></script>
    <script src="moveTest.js"></script>
    <script src="miaov.js"></script>
</html>